<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="能源管理—GIS地图"></Header>

    <section class="search_bar">
      <LInput label="地区" placeholder="请输入地区"></LInput>
      <LInput label="地点" placeholder="请输入地点" style="margin-left: 16px;"></LInput>
      <LInput label="项目类型" placeholder="请输入项目类型" style="margin-left: 16px;"></LInput>
      <LInput label="工程名称" placeholder="请输入工程名称" style="margin-left: 16px;"></LInput>
      <LSelect label="报警状态" placeholder="请选择报警状态" style="margin-left: 16px;"></LSelect>
      <LButton label="搜索" style="margin-left: 16px;"></LButton>
      <LButton label="列表模式" style="margin-left: 6px;"></LButton>
    </section>

    <section class="container">
      <div class="map-allter">
        <div class="map-allter-t">
          <span>
            <img src="../../../assets/img/icon1.png" alt="" />
            风险预警
          </span>
          <span> 能耗消耗过高 </span>
        </div>
        <div class="map-allter-b">
          <span>
            <img src="../../../assets/img/dian.png" alt="" />
          </span>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "@/components/LInput.vue";
import LSelect from "@/components/LSelect.vue";
import LButton from "@/components/LButton.vue";

export default {
  components: {
    Header,
    LInput,
    LSelect,
    LButton,
  },
  data() {
    return {};
  },
  mounted() {},
  beforeUnmount() {},
};
</script>
<style lang="less" scoped>
.bg {
  background: url("../../../assets/img/bj.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .search_bar {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }
  .container {
    flex: 1;

    .map-allter {
      position: absolute;
      width: 193px;
      height: 103px;
      top: 300px;
      left: 45%;
      .map-allter-t {
        width: 193px;
        height: 103px;
        background: url(../../../assets/img/tip_box.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        span {
          height: 40px;
          line-height: 40px;
          display: flex;
          align-items: center;
          img {
            margin-right: 6px;
          }
        }
      }
      .map-allter-b {
        width: 193px;
        height: 103px;
        text-align: center;
        padding-top: 15px;
      }
    }
  }
}
</style>
